<template>
	<view class="comment-page">
		<view class="rate-box">
			<span class="text">请为课程打分</span>
			<uni-rate :value="number" :size="22" active-color="#1783dd" class="main-rate" @change="numberChange"/>
		</view>
		<!-- <view class="flag-box">
			<view class="item" v-for="(item,index) in list" :class="item.addClass" @tap="select(index)">{{item.name}}</view>
		</view> -->
		<view class="textarea-box">
			<textarea v-model="textarea" :auto-height="true" class="main-textarea" placeholder="有什么想对老师说的" maxlength="-1"></textarea>
		</view>
		<view class="go" @tap="submit">提交</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	export default {
		components:{
			uniRate
		},
		data() {
			return {
				number:5,
				textarea:"",
				id:'',
				list:[
					{name:'讲解清晰',addClass:''},
					{name:'热情',addClass:''},
					{name:'受益匪浅',addClass:''},
					{name:'举一反三',addClass:''},
					{name:'历史沉淀',addClass:''},
				],
				content:{},
			}
		},
		onLoad(obj) {
			this.id = obj.id;
			this.getData();
		},
		onNavigationBarButtonTap(e) {
			console.log(e)
			this.submit();
			// uni.showToast({
			// 	title: e.index === 0 ? "你点了分享按钮" : "你点了收藏按钮",
			// 	icon: "none"
			// })
		},
		methods: {
			numberChange(e){
				//console.log(e,9090)
				this.number = e.value;
			},
			getData(){
				let that = this;
	            this.$http.get("/f/course?id="+this.id)
	            .then(function (response) {
	                let data = Object.assign(response.data.course,response.data.course.courseInfo,response.data);
	                
			        if(Number(data.presentPrice)==0){
			          data.isTree = true;
			        }
			        that.content = data;
			        
	            })
	            .catch(function (error) {
	              console.log(error);
	            })
				
			},
			submit(type){
				if(this.textarea==""){
					uni.showToast({
						title:'请输入评价内容',
						icon:'none'
					})
				}
				let that = this;
				this.$http.post("/f/addPingFen?rootCourseId="+this.id+"&score="+this.number+"&content="+this.textarea+"&courseType="+this.content.courseType+"&courseId="+this.content.id)
			      .then(function (response) {
			        uni.showToast({
						title:'已提交',
						icon:'success'
					})
					setTimeout(()=>{
						that.back();
					},500)
			      })
			      .catch(function (error) {
			        // handle error
			        console.log(error);
			      })
				
			},
			back(){
				 let pages = getCurrentPages(); // 当前页面
				 let beforePage = pages[pages.length - 2]; // 前一个页面
				 // console.log("beforePage");
				 uni.navigateBack({
				     success: function() {
				         beforePage.getData(); // 执行前一个页面的onLoad方法
				     }
				 });
				// uni.navigateBack({
				//     delta: 1
				// });
			},
			select(index){
				this.list.forEach((item,i)=>{
					if(i==index){
						if(item.addClass!=""){
							item.addClass = ""
						}
						else{
							item.addClass = "active"
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.comment-page{
		width:100%;
		height:100%;
		position:relative;
		background:#f5f5f5;
		float:left;
		.go{
			width:500rpx;
			height:80rpx;
			line-height:80rpx;
			text-align:center;
			border-radius:6rpx;
			background:#1783dd;
			font-size:32rpx;
			color:#fff;
			margin:0 auto;
			margin-top:80rpx;
		}
		.textarea-box{
			width:100%;
			box-sizing:border-box;
			padding:0 40rpx;
			margin-top:40rpx;
			.main-textarea{
				width:calc(100% - 40rpx);
				line-height:40rpx;
				display:flex;
				min-height:120rpx;
				background:#e6e6e6;
				font-size:28rpx;
				color:#888888;
				padding: 20rpx;
			}
		}
		
		.flag-box{
			width:100%;
			box-sizing:border-box;
			padding:0 40rpx;
			display:flex;
			flex-wrap:wrap;
			margin-top:40rpx;
			.item{
				padding:10rpx 20rpx;
				background:#e6e6e6;
				font-size:28rpx;
				color:#999999;
				margin-right:20rpx;
				margin-bottom:20rpx;
				border-radius:30rpx;
			}
			.active{
				background:#1783dd;
				color:#ffffff;
			}
		}
		.rate-box{
			width:100%;
			height:60rpx;
			box-sizing:border-box;
			padding:0 40rpx;
			margin-top:40rpx;
			display:flex;
			align-items:center;
			.text{
				line-height:60rpx;
				font-size:32rpx;
				color:#555555;
				margin-right:30rpx;
			}
			.main-rate{
				position:relative;
				height:60rpx;
				.uni-rate__icon{
					display:flex;
					align-items:center;
				}
			}
		}
	}
</style>
